<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.7.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            background-color: rgb(249, 236, 166);
            height: 500px;
            padding-top: 20px;
        }
        .area{
            background-color: gray;
            border-radius: 20px;
            height: 700px;
            padding-top: 10px;
        }
        .common{
            background-color: white;
            height: 170px;
            border-radius: 10px;
            width: 95%;
            margin: auto;
            margin-top: 10px;
        }
        .vip{
            background-color: black;
            color: antiquewhite;
            width: 90%;
            margin: auto;
            height: 50px;
            line-height: 50px;
            padding: 5px;
            border-radius: 10px 10px 0px 0px;
            display: flex;
           
        }
        .zjiang{
            /* border: 1px solid palegoldenrod; */
            text-align: right;
            flex: 1;
        }
        .shoucang img{
            width: 20%;
        }
        .fukuan img{
            width: 40px;
            flex: 10;
            margin-top: 5px;

        }
        .fukuan{
            display: flex;  
            justify-content: center;
            align-items: center;
        }
        .fukuan1 img{ 
            border: 1px solid hotpink;
            height: 50px;
            margin-top: 10px;
            margin-left: 30px;
        }
    
        .shoucang{
            display: flex;
            flex: 1;
            width: 400px;
            margin: auto;
        }
        .shoucang>div{
            margin-left: 40px;
            width: 200px;
        }
        .header{
            display: flex;
    
        }
        .all{

            text-align: right;
            flex: 1;
        }
        .head{
            /* border: 1px solid red; */
            display: flex;
            text-align: center;
            line-height: 25px;
            margin: auto;
            margin-top: 40px;
            height: 50%;
        }
        .head>div{
            width: 100px;
        }
        
        .bbnc img{
            width: 35px;
            flex: 10;
            margin-top: 5px;
        }
        .bbnc{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .kd img{
            width: 35px;
            flex: 10;
            margin-top: 15px;
        }
        .kd{
            display: flex;
        }
        .bbnc>div{
            margin-left: 30px;
            width: 100px;
        }
        .kd>div{
            width: 100px;
            margin-left: 30px;
        }
        
        .fukuan>div{
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="vip">88VIP |原价茅台每天限量抢
            <div class="zjiang">去中奖</div>
        </div>
        

        <div class="area">
            <div class="shoucang">
                <div>
                    <img src="../淘宝代码/1.jpg" alt="">
                    <span>收藏</span>
                </div>
                <div>
                    <img src="../淘宝代码/2.jpg" alt="">
                    <span>足迹</span>
                </div>
                <div>
                    <img src="../淘宝代码/3.jpg" alt="">
                    <span>作品</span>
                </div>
            </div>
            <div class="common">
                <div class="header">
                    <h3>我的订单</h3>
                    <div class="all">全部></div>
                </div>
                <div class="fukuan">
                    <div>
                        <img src="../淘宝代码/4.jpg" alt="">
                       <div>待付款</div>
                    </div>
                    <div>
                        <img src="../淘宝代码/5.jpg" alt="">
                        <div>待发货</div>
                    </div>
                    <div >
                        <img src="../淘宝代码/6.jpg" alt="">
                       <div>待收货</div>
                    </div>
                    <div >
                        <img src="../淘宝代码/7.jpg" alt="">
                        <div>待评价</div>
                    </div>
                    <div>
                        <img src="../淘宝代码/8.jpg" alt="">
                        <div>退款/售后</div>
                    </div>
                </div>
                <div class="fukuan1">
                    <img src="../淘宝代码/17.jpg" alt="">
                </div>
            </div>
            <div class="common">
                <div class="header">
                    <h3>我的权益</h3>
                    <div class="all">全部></div>
                </div>
                <div class="head">
                    <div >
                        <h3>￥100</h3>
                        <h3>红包</h3>
                    </div>
                    <div>
                        <h3>12张</h3>
                        <h3>优惠券</h3>
                    </div>
                    <div>
                        <h3>领红包￥40</h3>
                        <h3>淘宝省钱卡</h3>
                    </div>
                    <div>
                        <h3>￥27.71</h3>
                        <h3>淘金币可抵</h3>
                    </div>
                </div>
            </div>
            <div class="common">
                <div class="bbnc">
                    <div>
                        <img src="../淘宝代码/9.jpg" alt="">
                        <div>芭芭农场</div>
                    </div>
                    <div>
                        <img src="../淘宝代码/10.jpg" alt="">
                        <div>签到领现金</div>
                    </div>
                    <div>
                        <img src="../淘宝代码/11.jpg" alt="">
                        <div>淘宝人生</div>
                    </div>
                    <div>
                        <img src="../淘宝代码/12.jpg" alt="">
                        <div>斗地主</div>
                    </div>
    
                    </div>
                <div class="kd">
                    <div>
                        <img src="../淘宝代码/16.jpg" alt="">
                        <div>我的快递</div>
                    </div>
                    <div>
                        <img src="../淘宝代码/13.jpg" alt="">
                        <div>摇现金</div>
                    </div>
                    <div>
                        <img src="../淘宝代码/14.jpg" alt="">
                        <div>领取试用</div>
                    </div>
                    <div>
                        <img src="../淘宝代码/15.jpg" alt="">
                        <div>领券中心</div>
                </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>